<template>
    <div id="app" style="width: 62.5vw;margin: 1em auto;background-color:#ffffff;padding: 1em 5em;min-width: 600px">
        <el-steps simple  :active="active" finish-status="success">
            <el-step v-for="(item, index) in stepOptions" :title="item" :key="index"></el-step>
        </el-steps>
        <div class="cur-step">

            <keep-alive>
                <Component ref="stepComponent" :is="stepIs" @change="handleChangeStepForm"></Component>
            </keep-alive>

        </div>

        <div class="footer-btn">
            <el-button v-if="active >= 1" style="margin-top: 12px;" @click="previous">上一步</el-button>
            <el-button v-if="active <= 1" style="margin-top: 12px;" @click="next">下一步</el-button>
            <el-button v-if="active === 2" style="margin-top: 12px;" @click="submit">确认提交</el-button>
        </div>
    </div>
</template>

<script>

module.exports = {
    components: {
        StepOne: 'url:./StepOne.vue',
        StepTwo: 'url:./StepTwo.vue',
        StepThree: 'url:./StepThree.vue',
    },
    data() {
        return {
          stepOptions: ['第一步', '第二布', '第三步'],
          active: 0,
          stepIsConfig: ['Step-One', 'Step-Two', 'Step-Three'],
          form: {}
        }
    },
    computed: {
        stepIs() {
            return this.stepIsConfig[this.active]
        }
    },
    watch: {
      '$root.s_store': {
          immediate: true,
          deep: true,
          handler(val) {
              console.log('s_store', val);
          }
      }
    },
    methods: {
        handleChangeStepForm(val) {
            this.$set(this, 'form', {...this.form, ...val});
            this.$set(this.$root, 's_store', this.form);
            console.log('this.form', this.form)
        },
        validCurStep() {
            return this.$refs['stepComponent'].valid();
        },
        submit() {
            if (this.validCurStep() === false) {
                return;
            }
            console.log('提交了', JSON.stringify(this.form));
        },
        previous() {
            if (this.active <= 0) {
                this.active = 0;
                return;
            }
            this.active--;
        },
        next() {
            if (this.validCurStep() === false) {
                return;
            }
            if (this.active >= 2) {
                this.active = 2;
                return;
            }
            this.active++;

        }
    }
}
</script>

<style scoped>

.cur-step {
    display: flex;
    justify-content: center;
    padding: 1em;
}
.footer-btn {
    display: flex;
    justify-content: center;
    gap: 2em;

}

</style>
